<template>
  <section>
    <div class="button_top">
      <el-button
        @click="exportDoc"
        v-if="taskId || instanceId"
        :loading="loading"
        >导出签
      </el-button>
      <el-button
        @click="jumpNodeFun"
        v-if="operateType === 'JUMP'"
        :loading="loading"
        type="warning"
        >确认跳过
      </el-button>
      <el-button
        @click="completeData"
        v-if="operateType === 'COMPLETE'"
        :loading="loading"
        type="warning"
        >确认完成
      </el-button>
      <el-button
        @click="showNewDoc"
        type="warning"
        v-if="documentEnable && documentId === '' && !documentReadonly"
        >新建正文
      </el-button>
      <template v-for="(item, index) in buttons">
        <copy-select
          v-if="item.script === 'COPY_FOR'"
          :ico="item.ico"
          v-loading="loading"
          :btn-label="item.name"
          :is-mul-select="true"
          @taskCs="taskCs"
        ></copy-select>
        <el-button
          :loading="loading"
          type="primary"
          @click="saveData"
          v-if="item.script === 'SAVE'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
        <el-button
          @click="sendData"
          :loading="loading"
          type="primary"
          v-if="item.script === 'SEND'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
        <el-button
          @click="completeData"
          :loading="loading"
          type="primary"
          v-if="item.script === 'COMPLETED'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
        <el-button
          @click="readData"
          :loading="loading"
          type="primary"
          v-if="item.script === 'READ'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
        <el-button
          @click="backData"
          :loading="loading"
          type="danger"
          v-if="item.script === 'BACK'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>

        <el-button
          @click="endTask"
          :loading="loading"
          type="danger"
          v-if="item.script === 'END' && taskId"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
      </template>
    </div>
    <cm-scroll>
      <div
        class="test-form editor-doc"
        v-if="documentEnable && documentId !== ''"
      >
        <span @click="openDocF">{{ docForm.newFileName }}</span>
        <el-button @click="openDocF" type="primary">
          {{ documentReadonly ? "查看正文" : "编辑正文" }}
        </el-button>
      </div>
      <div class="test-form">
        <el-checkbox
          style="margin-right:15px "
          v-if="showSupervision"
          v-model="superviseChecked"
          >是否督办
        </el-checkbox>
        <div style="display: inline-block;">
          <el-radio-group v-model="priority">
            <el-radio
              @click.native.prevent="clickItem(item.keyword)"
              v-for="item in workFlowPriority"
              :key="item.keyword"
              :label="item.keyword"
              >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="test-form">
        <parser
          v-model="formTemData"
          ref="parser"
          :form-conf="formConf"
          :pValid.sync="valid"
        />
        <el-dialog
          :close-on-click-modal="false"
          title="步骤选择"
          append-to-body
          width="755px"
          ref="node_select_dialog"
          :visible.sync="showNodeSelect"
          v-if="showNodeSelect"
          destroy-on-close
        >
          <step-select
            :nodes="nextSteps"
            :select-type="curStep.behavior.flowType"
            :flowSelectType="flowSelectType"
            v-model="steps"
            @executeData="executeData"
          ></step-select>
        </el-dialog>
        <el-dialog
          :close-on-click-modal="false"
          title="退回步骤选择"
          append-to-body
          width="755px"
          ref="node_select_dialog"
          :visible.sync="showBackNodeSelect"
          v-if="showBackNodeSelect"
          destroy-on-close
        >
          <back-step-select
            select-type="SINGLE"
            :nodes="backSteps"
            v-model="steps"
            @executeData="executeBackData"
          >
          </back-step-select>
        </el-dialog>
      </div>
    </cm-scroll>

    <div class="buttons_footer">
      <el-button
        @click="exportDoc"
        v-if="taskId || instanceId"
        :loading="loading"
        >导出签
      </el-button>
      <el-button
        @click="jumpNodeFun"
        v-if="operateType === 'JUMP'"
        :loading="loading"
        type="warning"
        >确认跳过
      </el-button>
      <el-button
        @click="completeData"
        v-if="operateType === 'COMPLETE'"
        :loading="loading"
        type="warning"
        >确认完成
      </el-button>
      <el-button
        @click="showNewDoc"
        type="warning"
        v-if="documentEnable && documentId === '' && !documentReadonly"
        >新建正文
      </el-button>
      <template v-for="(item, index) in buttons">
        <copy-select
          v-if="item.script === 'COPY_FOR'"
          :ico="item.ico"
          :loading="loading"
          :btn-label="item.name"
          :is-mul-select="true"
          @taskCs="taskCs"
        ></copy-select>
        <el-button
          :loading="loading"
          type="primary"
          @click="saveData"
          v-if="item.script === 'SAVE'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
        <el-button
          @click="sendData"
          :loading="loading"
          type="primary"
          v-if="item.script === 'SEND'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
        <el-button
          @click="completeData"
          :loading="loading"
          type="primary"
          v-if="item.script === 'COMPLETED'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
        <el-button
          @click="readData"
          :loading="loading"
          type="primary"
          v-if="item.script === 'READ'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
        <el-button
          @click="backData"
          :loading="loading"
          type="danger"
          v-if="item.script === 'BACK'"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>

        <el-button
          @click="endTask"
          :loading="loading"
          type="danger"
          v-if="item.script === 'END' && taskId"
          ><i :class="item.ico" style="margin-right: 5px;"></i>{{ item.name }}
        </el-button>
      </template>
    </div>

    <el-dialog
      :close-on-click-modal="false"
      title="新增督办任务"
      append-to-body
      width="50%"
      :visible.sync="showSupervise"
      v-if="showSupervise"
      destroy-on-close
    >
      <supervise-add @saveData="saveSupervise"></supervise-add>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="新建正文"
      append-to-body
      width="50%"
      :visible.sync="showDocNameDialog"
      v-if="showDocNameDialog"
      destroy-on-close
    >
      <el-form ref="docForm" :model="docForm" :rules="docFormRules">
        <el-form-item prop="newFileName">
          <el-input v-model="docForm.newFileName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="newDocF" type="primary" style="float: right;"
            >确定
          </el-button>
          <el-button
            @click="showDocNameDialog = false"
            type="info"
            style="float: right;margin-right: 10px;"
            >关闭
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </section>
</template>

<script>
import stepSelect from "./stepSelect";
import backStepSelect from "./backStepSelect";
import copySelect from "./copySelect";
import superviseAdd from "../supervise/superviseAdd";
import { mapGetters } from "vuex";
import _ from "lodash";

import flowNodeHistory from "./flowNodeHistory";

export default {
  name: "sealApply",
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.initData();
    });
  },

  components: {
    stepSelect,
    copySelect,
    flowNodeHistory,
    superviseAdd,
    backStepSelect
  },
  created() {},
  computed: {
    ...mapGetters({
      mergeFormData: "mergeFormData",
      formDataMap: "formDataMap"
    })
  },
  data() {
    return {
      paraValue: "",
      titleField: "", // 标题字段
      showDocNameDialog: false, // 新建正文弹框控制
      docForm: { newFileName: "" }, // 新建正文名称
      docFormRules: {
        newFileName: [
          { required: true, message: "请输入正文 附件名称", trigger: "blur" }
        ]
      },
      documentEditStatus: "3", // 正文的编辑状态，默认3关闭，2保存成功，1打开状态
      socketClientId: Math.random()
        .toString(36)
        .substring(1, 10),
      documentReadonly: false, // 正文属性，只读，编辑
      operateType: "",
      superviseChecked: false, //是否督办
      priority: "", //紧急程度
      showSupervise: false, //显示督办弹框
      showSupervision: false, // 控制是否显示督办选择框
      time: 3, // 10 秒自动关闭
      currentTokenUser: JSON.parse(window.sessionStorage.getItem("userInfo")),
      loading: false,
      activeName: "form",
      nextSteps: [],
      backSteps: [], // 退回的步骤列表
      curStep: {},
      documentEnable: false,
      showNodeSelect: false, //下一步弹框控制
      showBackNodeSelect: false, // 退回下一步弹框控制
      formData: {},
      formTemData: {},
      documentId: "",
      flowId: "",
      taskId: "",
      announcementId: "",
      steps: [], // 下一步选择的值
      selectBackSteps: [], // 退回选择的步骤
      formConf: {
        formModel: "formData"
      },
      flowImage: "", //流程图
      buttons: [],
      valid: true,
      isRefresh: false, // 是否刷新
      instanceId: "", //实例id,
      workFlowPriority: this.getDictionary("WORKFLOW_PRIORITY"),
      back: false,
      flowSelectType: "STEP_USER" // 步骤用户选择方式(默认步骤用户同时) 可选项 STEP_FIRST
    };
  },
  mounted() {
    this.connect();
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
      this.initData();
    }
  },
  methods: {
    clickItem(e) {
      e === this.priority ? (this.priority = "") : (this.priority = e);
    },
    goPreviousPage() {
      this.$router.go(-1);
    },
    // 保存督办信息
    saveSupervise(data) {
      let para = this.getParaData(this.paraValue);
      // para.supervisionMatter = data;
      para.saveMatterDto = data;
      this.API.launchSupervisionMatter({ body: para })
        .then(res => {
          this.showSupervise = false;
          this.taskId = res.data.executeResult.taskId;
          this.instanceId = res.data.executeResult.instanceId;
          this.closeWindow(
            res.data.executeResult.message,
            res.data.executeResult.success
          );
        })
        .catch(() => {})
        .finally(() => {});
    },
    // 弹出新建正文名称
    showNewDoc() {
      this.showDocNameDialog = true;
      if (this.titleField) {
        this.getNewFileName(this.formTemData.fields);
      } else {
        this.docForm.newFileName = "";
      }
    },
    //编辑正文
    openDocF() {
      this.documentEditStatus = "1";
      let protectType = this.documentReadonly ? 3 : -1;
      this.openDocVue(
        this.currentTokenUser.user.name,
        "file",
        this.documentId,
        this.flowId,
        this.taskId,
        this.instanceId,
        protectType,
        this.socketClientId
      );
    },
    // 导出签
    exportDoc() {
      if (this.taskId || this.instanceId) {
        let fileDownload = require("js-file-download");
        let para = {};
        if (this.taskId) {
          para.taskId = this.taskId;
        }
        if (this.instanceId) {
          para.instanceId = this.instanceId;
        }
        this.loading = true;
        this.ExportApi.exportFormPdf(para)
          .then(res => {
            const disposition = res.headers["content-disposition"];
            let fileName = this.getFileName(disposition);
            fileDownload(res.data, fileName);
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 新建文档
    newDocF() {
      this.$refs["docForm"].validate(valid => {
        if (valid) {
          this.documentEditStatus = "1";
          this.newDocVue(
            this.currentTokenUser.user.name,
            this.documentId,
            this.flowId,
            this.taskId,
            this.instanceId,
            this.socketClientId,
            this.docForm.newFileName
          );
        }
      });
      this.showDocNameDialog = false;
    },

    handleClick(tab, event) {
      this.activeName = tab.paneName;
      // switch (tab.paneName) {
      //   case 'image':
      //     this.initFlow()
      //     break
      // }
    },
    initData() {
      this.flowId = this.$route.query.flowId;
      this.taskId = this.$route.query.taskId;
      this.operateType = this.$route.query.type;
      this.back = this.$route.query.back;
      this.announcementId = this.$route.query.announcementId || "";
      this.instanceId = "";
      this.documentId = "";
      console.log(this.flowId, this.taskId);
      if (this.flowId) {
        this.getFormDataF();
      }
    },
    // 抄送
    taskCs(val) {
      if (this.taskId) {
        this.loading = true;
        let tem = {};
        tem.id = this.taskId;
        tem.copyUser = val;
        this.API.copyFor(tem)
          .then(res => {
            this.success("抄送成功");
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },

    // 展示选择步骤
    showNodeSelectFun() {
      console.log(this.nextSteps);
      this.showNodeSelect = true;
    },
    // 获取工作流表单信息
    getFormDataF() {
      let para = {
        flowId: this.flowId,
        taskId: this.taskId,
        announcementId: this.announcementId || ""
      };
      if (this.operateType === "COMPLETE") {
        this.getAdminFormDataF();
      } else {
        this.API.getFormData(para).then(res => {
          if (res.data.workflowTask && res.data.workflowTask.priority) {
            this.priority = res.data.workflowTask.priority;
          }
          let { flowSelectType } = res.data;
          if (flowSelectType) {
            this.flowSelectType = flowSelectType;
          }
          this.formConf = res.data.form;
          this.buttons = res.data.buttons;
          this.titleField = res.data.titleField;
          this.documentReadonly = res.data.documentReadonly;
          this.showSupervision = res.data.showSupervision;
          this.documentId =
            res.data.documentId === undefined ? "" : res.data.documentId;
          this.docForm.newFileName =
            res.data.documentName === undefined ? "" : res.data.documentName;
          this.documentEnable =
            res.data.documentEnable === undefined
              ? false
              : res.data.documentEnable;
          this.flowImage = res.data.image;
          document.title = this.formConf.name;
        });
      }
    },
    // 获取工作流表单信息(只有特殊完成)
    getAdminFormDataF() {
      let para = { flowId: this.flowId, taskId: this.taskId };
      this.API.getAdminFormData(para).then(res => {
        let { flowSelectType } = res.data;
        if (flowSelectType) {
          this.flowSelectType = flowSelectType;
        }
        this.formConf = res.data.form;
        this.buttons = res.data.buttons;
        this.titleField = res.data.titleField;
        this.documentReadonly = res.data.documentReadonly;
        this.showSupervision = res.data.showSupervision;
        this.documentId =
          res.data.documentId === undefined ? "" : res.data.documentId;
        this.docForm.newFileName =
          res.data.documentName === undefined ? "" : res.data.documentName;
        this.documentEnable =
          res.data.documentEnable === undefined
            ? false
            : res.data.documentEnable;
        this.flowImage = res.data.image;
        document.title = this.formConf.name;
      });
    },
    getNewFileName(componentList) {
      if (componentList) {
        componentList.forEach(cur => {
          const config = cur.__config__;
          if (cur.__vModel__ && cur.__vModel__ === this.titleField) {
            this.docForm.newFileName =
              config.defaultValue === undefined ? "" : config.defaultValue;
            return false;
          }
          if (config.children) this.getNewFileName(config.children);
        });
      }
    },
    initFormData(componentList, formData) {
      if (componentList) {
        componentList.forEach(cur => {
          const config = cur.__config__;
          if (cur.__vModel__)
            formData[cur.__vModel__] =
              config.defaultValue === undefined ? "" : config.defaultValue;
          if (config.children) this.initFormData(config.children, formData);
        });
      }
    },
    // 保存接口
    saveData() {
      this.checkData();
      if (this.valid) {
        this.loading = true;
        let para = this.getParaData("SAVE");
        this.API.execute({ body: para })
          .then(res => {
            this.taskId = res.data.taskId;
            this.instanceId = res.data.instanceId;
            this.success(res.data.message);
            this.getFormDataF();
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 跳过节点
    jumpNodeFun() {
      let para = {
        flowId: this.flowId,
        taskId: this.taskId,
        formId: this.formConf.id,
        instanceId: this.instanceId,
        type: "JUMP",
        isMobile: false
      };
      this.loading = true;
      this.API.sendFlow({ body: para })
        .then(res => {
          //判断是否有下一步，有了，需要弹出选择步骤的组件，无》提示成功，刷新任务
          if (res.data && res.data.nextSteps && res.data.nextSteps.length > 0) {
            this.nextSteps = res.data.nextSteps;
            this.curStep = res.data.currentStep;
            // 弹出框
            this.showNodeSelectFun();
          } else {
            this.taskId = res.data.taskId;
            this.instanceId = res.data.instanceId;
            this.closeWindow(res.data.message, res.data.success);
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 发送
    sendData() {
      this.checkData();
      if (this.valid) {
        if (this.superviseChecked) {
          // 督办
          this.showSupervise = true;
          this.paraValue = "SUBMIT";
        } else {
          let para = this.getParaData("SUBMIT");
          this.loading = true;
          console.log(para);
          this.API.sendFlow({ body: para })
            .then(res => {
              //判断是否有下一步，有了，需要弹出选择步骤的组件，无》提示成功，刷新任务
              if (
                res.data &&
                res.data.nextSteps &&
                res.data.nextSteps.length > 0
              ) {
                this.nextSteps = res.data.nextSteps;
                this.curStep = res.data.currentStep;
                // 弹出框
                this.showNodeSelectFun();
              } else {
                this.taskId = res.data.taskId;
                this.instanceId = res.data.instanceId;
                this.closeWindow(res.data.message, res.data.success);
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      }
    },
    // 执行
    executeData(val) {
      this.steps = val;
      this.checkData();
      if (this.valid) {
        this.loading = true;
        let para = this.getParaData("SUBMIT");
        this.API.execute({ body: para })
          .then(res => {
            this.taskId = res.data.taskId;
            this.instanceId = res.data.instanceId;
            this.closeWindow(res.data.message, res.data.success);
            this.showNodeSelect = false;
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },

    // 检测数据状态
    checkData() {
      this.$refs["parser"].validateFormData();
      this.valid = this.$refs["parser"].formValid;
      console.log(this.documentReadonly);
      // 可编辑，验证documentId
      if (!this.documentReadonly) {
        console.log(this.documentEditStatus);
        if (this.documentEditStatus !== "3") {
          this.warning("请先在wps关闭当前正文文档后操作");
          this.valid = false;
        }
      }
    },

    // 获取参数
    getParaData(type) {
      this.initFormData(this.formTemData.fields, this.formData);
      this.$store.dispatch("mergeFormDataAction", this.formData);
      this.formData = _.clone(this.mergeFormData);
      this.formData.document_id = this.documentId;
      console.log(2222222222222, this.formData);
      return {
        flowId: this.flowId,
        taskId: this.taskId,
        formId: this.formConf.id,
        instanceId: this.instanceId,
        formData: this.formData,
        type: type,
        steps: this.steps,
        isMobile: false,
        priority: this.priority,
        announcementId: this.announcementId
      };
    },

    // 完成
    async completeData() {
      let confirm = await this.confirmForm("是否确认完成，请谨慎操作！");
      if (confirm === "cancel") return;
      this.checkData();
      if (this.valid) {
        if (this.superviseChecked) {
          // 督办
          this.showSupervise = true;
          this.paraValue = "COMPLETED";
        } else {
          this.loading = true;
          let para = this.getParaData("COMPLETED");
          // this.API.execute({ body: para })
          //   .then(res => {
          //     this.taskId = res.data.taskId;
          //     this.instanceId = res.data.instanceId;
          //     this.closeWindow(res.data.message, res.data.success);
          //   })
          //   .finally(() => {
          //     this.loading = false;
          //   });
          this.API.sendFlow({ body: para })
            .then(res => {
              //判断是否有下一步，有了，需要弹出选择步骤的组件，无》提示成功，刷新任务
              if (
                res.data &&
                res.data.nextSteps &&
                res.data.nextSteps.length > 0
              ) {
                this.nextSteps = res.data.nextSteps;
                this.curStep = res.data.currentStep;
                // 弹出框
                this.showNodeSelectFun();
              } else {
                this.API.execute({ body: para }).then(res => {
                  this.taskId = res.data.taskId;
                  this.instanceId = res.data.instanceId;
                  this.closeWindow(res.data.message, res.data.success);
                });
              }
            })
            .finally(() => {
              this.loading = false;
            });
        }
      }
    },
    // 已阅知
    readData() {
      this.checkData();
      if (this.valid) {
        this.loading = true;
        let para = this.getParaData("COPY_FOR_COMPLETED");
        this.API.execute({ body: para })
          .then(res => {
            this.taskId = res.data.taskId;
            this.instanceId = res.data.instanceId;
            this.closeWindow(res.data.message, res.data.success);
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    //终止
    endTask() {
      this.$confirm("是否确认终止?", "提示", {})
        .then(() => {
          this.loading = true;
          this.API.endFlow({ id: this.taskId })
            .then(() => {
              this.closeWindow("终止成功");
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => {});
    },
    // 退回 ,不校验
    async backData() {
      let confirm = await this.confirmForm("是否确认退回，请谨慎操作！");
      if (confirm === "cancel") return;
      this.checkData();
      if (this.valid) {
        this.loading = true;
        let para = this.getParaData("BACK");
        this.API.backFlow({ body: para })
          .then(res => {
            //判断是否有下一步，有了，需要弹出选择步骤的组件，无》提示成功，刷新任务
            console.log(res.data, "back");
            if (res.data && res.data.length > 0) {
              this.backSteps = res.data;
              // 弹出框
              this.showBackNodeSelect = true;
            } else {
              this.closeWindow(res.data.message, res.data.success);
            }
          })
          .finally(() => {
            this.loading = false;
          });
      }
    },
    // 退回的执行
    executeBackData() {
      this.loading = true;
      let para = this.getParaData("BACK");
      this.API.execute({ body: para })
        .then(res => {
          this.closeWindow(res.data.message, res.data.success);
          this.showBackNodeSelect = false;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    // 关闭窗口
    closeWindow(message, success) {
      const system = JSON.parse(window.sessionStorage.getItem("system")) || "";
      if (success) {
        if (system && system.workflowWindowClose) {
          this.successTime(message, this.time);
          this.getFormDataF(); // 刷新数据
          setTimeout(() => {
            this.closeTimeOut();
          }, 1000 * this.time);
        } else {
          this.success(message);
          this.getFormDataF(); // 刷新数据
        }
      } else {
        this.warning(message);
      }
    },
    closeTimeOut() {
      window.close();
    },
    // 连接socket
    connect() {
      const socketUrl =
        window.api.socketUrl +
        JSON.parse(window.sessionStorage.getItem("userInfo")).user.userId +
        "?token=" +
        window.sessionStorage.getItem("token") +
        "&connectionId=" +
        this.socketClientId;
      this.socket = new WebSocket(socketUrl);
      // 监听socket打开
      this.socket.onopen = function(msg) {
        console.log("浏览器WebSocket已打开", msg);
      };
      let that = this;
      // 监听socket消息接收
      this.socket.onmessage = function(msg) {
        // 转换为json对象
        const data = JSON.parse(msg.data);
        console.log(data);
        switch (data.type) {
          case "WORKFLOW_DOCUMENT_RETURN":
            if (data.message) {
              that.playVideo();
              that.documentId = data.message.id;
              that.docForm.newFileName = data.message.fileName;
            }
            break;
          case "WORKFLOW_DOCUMENT_STATE":
            if (data.message) {
              that.documentEditStatus = data.message.state;
            }
            break;
        }
      };
      // 监听socket错误
      this.socket.onerror = function() {
        that.$notify({
          title: "错误",
          message: "服务器异常，SOCKET已断开",
          type: "error",
          duration: 0
        });
      };
      // 监听socket关闭
      this.socket.onclose = function() {
        console.log("WebSocket已关闭");
      };
    }
  }
};
</script>

<style lang="less" scoped>
.editor-doc {
  display: flex;
  justify-content: space-between;

  span {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    margin-right: 10px;
    line-height: 40px;
    color: #409eff;
  }
}

/deep/ table {
  table-layout: fixed;
}

.apply_tab {
  position: relative;
  top: 40px;
  background-color: white;
  width: 100%;

  /deep/ .el-tabs__content {
    flex-grow: 1 !important;
    overflow-y: auto !important;
    background-color: #e9f3fd !important;
  }
}

/deep/ .topPanelFixed {
  position: fixed;
  top: 0px;
  height: 80px;
  z-index: 1000;
  background-color: white;

  .el-tabs__active-bar {
    margin-left: 100px !important;
  }

  .formTab {
    /*margin-left: 100px !important;*/
  }

  .el-tabs__header {
    margin: 0px;
  }
}

.button_right {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 1000;
  background-color: transparent;
}

.el-input__inner {
  border: none !important;
  border-radius: 0px;
  border-bottom: 1px solid #cececd !important;
}

.el-textarea__inner {
  border: none !important;
  border-radius: 0px;
  border-bottom: 1px solid #cececd !important;
}

/*重写el-radio样式*/
/deep/ .el-radio__inner {
  border-radius: 1px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  border: 1px solid #cacaca !important;
  -webkit-transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}

/deep/ .el-radio__inner::after {
  border: 1px solid #dcdfe6;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  border-radius: 1px;
  background-color: #409eff;
  background-image: url(../../../assets/search/whitegou.svg);
  background-repeat: no-repeat;
  background-size: 14px 14px;
  transform: rotate(45deg) scaleY(0);
  transition: transform 0.05s ease-in 0.05s,
    -webkit-transform 0.05s ease-in 0.05s;
  transform-origin: center;
}

/deep/ .el-radio__input.is-checked + .el-radio__label {
  color: #0e0e0e;
}

/deep/ .table_form {
  .el-form-item {
    margin-bottom: 0px !important;
    border-radius: 0px;
  }

  span,
  .label-input-flex {
    font-size: 14px !important;
    font-family: "微软雅黑" !important;
  }

  .el-input__inner {
    border: none !important;
    font-size: 14px !important;
    font-family: "微软雅黑" !important;
  }

  .el-textarea__inner {
    border: none !important;
    border-radius: 0px;
    font-size: 14px !important;
    font-family: "微软雅黑" !important;
  }

  .el-upload-list {
    min-height: 60px;
  }
}
</style>
